<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-carousel indicator-position="outside" >
          <el-carousel-item v-for="(item,index) in noticeData" :key="index">
            <h3 style="text-align: center;cursor: pointer;" @click="$router.push('/NoticeDetail?id=' +item.id)">{{ item.name }}</h3>
            <el-image :src="item.img" style="width: 100%;height: 100%;cursor: pointer;" @click="$router.push('/NoticeDetail?id=' +item.id)"></el-image>
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <p>全国肺炎疫情实时动态显示</p>
      </el-col>
      <el-col :span="12" style="text-align: right">
       <p style="color: #ff405d"> {{lastUpdateTime}}</p>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="margin-bottom: 40px">
      <el-col :span="6">
        <el-card >
          <div style="text-align: center; font-weight: bold;font-size: 16px">现有确诊</div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold;font-size: 20px;color: #ff405d;">
            {{ today.nowConfirm }}
          </div>
          <div style="font-size: 12px;text-align: center; ">较昨日+{{todayAdd.confirm}}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card >
          <div style="text-align: center; font-weight: bold;font-size: 16px">无症状感染者</div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold;font-size: 20px;color: #800606;">
            {{ today.noInfectH5 }}
          </div>
          <div style="font-size: 12px;text-align: center; ">较昨日+{{todayAdd.localinfectionadd}}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card >
          <div style="text-align: center; font-weight: bold;font-size: 16px">累计死亡</div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold;font-size: 20px;color: #530011;">
            {{ today.dead }}
          </div>
          <div style="font-size: 12px;text-align: center; ">较昨日+{{todayAdd.dead}}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card >
          <div style="text-align: center; font-weight: bold;font-size: 16px">累计治愈</div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold;font-size: 20px;color: #06de35;">
            {{ today.heal }}
          </div>
          <div style="font-size: 12px;text-align: center; ">较昨日+{{todayZy.heal}}</div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
     <el-col>
       <el-card>
         <!-- 为 ECharts 准备一个定义了宽高的 DOM confirm: 36264-->
         <div id="main" style="width: 100%;height:400px;"></div>
       </el-card>
     </el-col>
    </el-row>

    <el-row>
      <el-col>
        <el-card>
          <div id="map" style="width:100%;height: 500px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>

</template>

<script lang="js">
import * as echarts from 'echarts'
import china from '../utils/china'
export default {
  name: "Home",
  data(){
    return{
      today:{},
      todayAdd:{},
      total:{},
      todayZy:{},
      lastUpdateTime:'',
      data:[],
      value: true,
      noticeData:[],
    }
  },
  created() {
    this.getData()
    this.load()
  },
  methods:{
    load(){
      this.request.get("/notice").then(res =>{
        this.noticeData=res.data.splice(0,5)
      })
    },
    getData(){
      this.request.get("/echarts/list").then(res =>{
        // console.log(res.data)
        this.today = res.data.chinaDayListNew[29]
        this.todayAdd = res.data.chinaDayAddListNew[29]
      })
    }
  },
  mounted() {  //页面元素渲染之后再触发
    // 基于准备好的dom，初始化echarts实例
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var chartDom2 = document.getElementById('map');
    var myMap = echarts.init(chartDom2);


   var option = {
      title: {
        text: '本土增加趋势'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['本土确诊新增', '治愈人数', '本土无症状']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: []
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '本土确诊新增',
          type: 'line',
          stack: 'Total',
          data: []
        },
        {
          name: '治愈人数',
          type: 'line',
          stack: 'Total',
          data: []
        },
        {
          name: '本土无症状',
          type: 'line',
          stack: 'Total',
          data: []
        }
      ]
    };
    //中国地图
      // 指定图表的配置项和数据
      var optionMap = {
        title: {
          text: "中国疫情数据可视图",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["中国疫情数据可视图"],
        },
        visualMap: {
          type: "piecewise",
          pieces: [
            {
              min: 10000,
              max: 1000000,
              label: "大于等于10000人",
              color: "#372a28",
            },
            { min: 5000, max: 9999, label: "确诊5000-9999人", color: "#4e160f" },
            { min: 1000, max: 4999, label: "确诊1000-4999人", color: "#974236" },
            { min: 100, max: 999, label: "确诊100-999人", color: "#ee7263" },
            { min: 1, max: 99, label: "确诊1-99人", color: "#f5bba7" },
          ],
          color: ["#E0022B", "#E09107", "#A3E00B"],
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        roamController: {
          show: true,
          left: "right",
          //   mapTypeControl: {
          //     china: true,
          //   },
        },
        // bmap: {
        //   //
        // },
        geo: {
          //地理坐标系组件用于地图的绘制
          map: "china",
          roam: false, //不开启缩放和平移
          label: {
            normal: {
              show: true,
              fontSize: "10",
              color: "rgba(0,0,0,0.7)",
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)",
            },
            emphasis: {
              areaColor: "#F3B329", //鼠标选择区域颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        series: [
          {
            name: "确诊数",
            type: "map", //图表类型
            geoIndex: 0,
            data: [], //图表的数据
          },
        ],
      };

    this.request.get("/echarts/list").then(res =>{
      //获取近30天的新增确诊人数
      // console.log(res.data.chinaDayAddListNew)
      for (let i = 0; i < res.data.chinaDayAddListNew.length; i++) {

        option.xAxis.data.push(res.data.chinaDayAddListNew[i].y+'.'+res.data.chinaDayAddListNew[i].date)
        option.series[0].data.push(res.data.chinaDayAddListNew[i].localConfirmadd)
        option.series[1].data.push(res.data.chinaDayAddListNew[i].heal)
        option.series[2].data.push(res.data.chinaDayAddListNew[i].localinfectionadd)
      }

      myChart.setOption(option);
    })
    // 使用刚指定的配置项和数据显示图表。
    this.request.get("/echarts/toDayList").then(res =>{
      this.todayZy = res.data.areaTree[2].today
      this.lastUpdateTime = res.data.areaTree[2].lastUpdateTime
      for (let i = 0; i < res.data.areaTree[2].children.length; i++) {
        optionMap.series[0].data.push({
          name: res.data.areaTree[2].children[i].name,
          value: res.data.areaTree[2].children[i].total.confirm - res.data.areaTree[2].children[i].total.heal
        })
      }
      myMap.setOption(optionMap)
    })
  }
}
</script>

<style scoped>
.main{
  width: 900px;
  height: 600px;

  top: 20px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;

}

</style>